<template>
	<view class="query_result_container">
		<view class="result_box">
			<view class="result_all" v-for="item in introduceList" :key="item.id">
				<view class="result_introduce_box">
					<!-- 	<view class="introduce_img_box">
						<image :src="item.package_cover_img" mode="" class="introduce_img"></image>
					</view> -->
					<view class="introduce_msg_box">
						<view class="title_box">
							<view class="title_msg">
								{{ item.package_name }}
							</view>
							<view class="title_status" v-if="item.open_status == 0">
								待发货
							</view>
							<view class="title_status" v-else-if="item.open_status == 1">
								生产中
							</view>
							<view class="title_status" v-else-if="item.open_status == 2">
								已发货
							</view>
							<view class="title_status" v-else-if="item.open_status == 3">
								审核失败
							</view>
						</view>
						<!-- <view class="tip_price">
							￥{{ item.price }}
						</view> -->
					</view>
				</view>

				<view class="result_information_box">
					<view class="information_box">
						<view class="information_title">
							订单号
						</view>
						<view class="information_detail">
							{{ item.order_no }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title">
							物流名称
						</view>
						<view class="information_detail">
							{{ item.express_name ? item.express_name : '无' }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title">
							物流单号
						</view>
						<view class="information_detail">
							{{ item.express_no ? item.express_no : '无' }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title">
							收货人
						</view>
						<view class="information_detail">
							{{ item.contact }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title">
							收货电话
						</view>
						<view class="information_detail">
							{{ item.mobile }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title" style="width: 160rpx;">
							收货地址
						</view>
						<view class="information_detail">
							{{ item.express_address }}
						</view>
					</view>


					<view class="information_box">
						<view class="information_title" style="width: 160rpx;">
							激活状态
						</view>
						<view class="information_detail">
							{{ item.active_status == 1 ? '已激活' : '未激活' }}
						</view>
					</view>
					
					<view class="information_box" v-if="item.active_time">
						<view class="information_title">
							激活时间：
						</view>
						<view class="information_detail">
							{{ item.active_time }}
						</view>
					</view>
					
					<view class="information_box" v-if="item.sett_time">
						<view class="information_title">
							结算时间：
						</view>
						<view class="information_detail">
							{{ item.sett_time ? item.sett_time : '无' }}
						</view>
					</view>
					
					<view class="information_box">
						<view class="information_title">
							首充状态：
						</view>
						<view class="information_detail">
							<span v-if="item.first_charge_status == 0">未首充</span>
							<span v-else-if="item.first_charge_status == 1">已首充</span>
						</view>
					</view>
					
					<view class="information_box" v-if="item.first_charge_time">
						<view class="information_title">
							首充时间：
						</view>
						<view class="information_detail">
							{{ item.first_charge_time ? item.first_charge_time : '无' }}
						</view>
					</view>
					
					<view class="information_box" v-if="item.first_charge_amount">
						<view class="information_title">
							首充金额：
						</view>
						<view class="information_detail">
							{{ item.first_charge_amount ? item.first_charge_amount : '无' }}
						</view>
					</view>


					<view class="information_box">
						<view class="information_title" style="width: 160rpx;">
							下单时间
						</view>
						<view class="information_detail">
							{{ item.created_at }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title" style="width: 160rpx;">
							开卡号码
						</view>
						<view class="information_detail">
							{{ item.phonenum ? item.phonenum : '暂无' }}
						</view>
					</view>

					<view class="information_box" v-if="item.open_status == 3">
						<view class="information_title" style="width: 160rpx;">
							失败原因
						</view>
						<view class="information_detail" style="width: 60%;">
							{{ item.open_message }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title" style="width: 160rpx;">
							订单状态
						</view>
						<view class="information_detail">
							<view class="my-order-bottom-card-num" v-if="item.open_status == 1">待发货</view>
							<view class="my-order-bottom-card-num" v-else-if="item.open_status == 2">已发货</view>
							<view class="my-order-bottom-card-num" v-else-if="item.open_status == 3">发货失败</view>
							<view class="my-order-bottom-card-num" v-else-if="item.open_status == 4">待收货</view>
						</view>
					</view>

					<!-- 	<view class="information_box">
						<view class="information_title">
							备注
						</view>
						<view class="information_detail">
							{{ item.remark }}
						</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import imageUrl from '@/utils/imgUrl.js'
	export default {
		data() {
			return {
				introduceList: [],
				phoneNum: '',
				packageImgUrl: ''
			}
		},
		onShow() {

		},
		onLoad(option) {
			this.phoneNum = JSON.parse(decodeURIComponent(option.number));
			if (this.phoneNum) {
				this.getOrderDetail()
			}
			this.packageImgUrl = imageUrl.packageImgUrl
		},
		methods: {
			// 订单查询
			getOrderDetail() {
				this.$request('/getUserOrderByAddressPhone', {
					// phone: '15243212438'
					phone: this.phoneNum
				}, 'GET').then(res => {
					if (res.code == 1) {
						this.introduceList = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.query_result_container {
		padding: 13rpx 20rpx 20rpx;

		.result_box {

			.result_all {
				background: #FFFFFF;
				border: 1px solid #F6F6F6;
				box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
				border-radius: 12rpx;
				margin-top: 12rpx;
				padding: 33rpx 26rpx 5rpx;

				.result_introduce_box {
					// display: flex;
					// align-items: center;
					// justify-content: space-between;
					border-bottom: 1px solid #F5F5F5;
					padding-bottom: 36rpx;

					.introduce_img_box {
						width: 180rpx;
						height: 180rpx;

						.introduce_img {
							width: 100%;
							height: 100%;
							border-radius: 12rpx;
						}
					}

					.introduce_msg_box {

						.title_box {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.title_msg {
								width: 280rpx;
								font-size: 28rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #333333;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							}

							.title_status {
								font-size: 28rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #4C8BFF;
							}
						}

						.tip_msg {
							width: 450rpx;
							height: 68rpx;
							font-size: 22rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							line-height: 33rpx;
							margin: 16rpx 0;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.tip_price {
							font-size: 30rpx;
							font-family: my-font;
							font-weight: normal;
							color: #FC3838;
							text-align: right;
						}
					}
				}

				.result_information_box {
					padding-top: 37rpx;

					.information_box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 41rpx;

						.information_title {
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #4D4D4D;
						}

						.information_detail {
							font-size: 24rpx;
							font-family: my-font;
							font-weight: 400;
							color: #808080;
						}
					}
				}
			}
		}
	}
</style>